<template>
    <div class="switch-box" :class="{'checked':value}" @click="$emit('input',!value)">

    </div>
</template>

<script>
    export default {
        props:{
            value:{
                type:Boolean,
                default:false
            }
        }
    }
</script>

<style lang="sass" scoped>
.switch-box
    position: relative
    width: 60px
    height: 30px
    border-radius: 15px
    box-shadow:0 0 5px 0 #ccc inset
    &:before
        content:"",
        position: absolute
        left: 0
        top: 0
        width: 30px
        height: 30px
        border-radius: 50%
        box-shadow:0 0 3px 0 #ccc
        transition: .3s
        background: #fff
    &.checked
        background: blue
        &:before
            left: 30px
</style>